<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Freude Xu
 * @LastEditTime: 2021-09-23 19:44:37
-->
<template>
  <div ref='root' style="height:180px">

  </div>
</template>
<script>
  import {
    Rose
  } from '@antv/g2plot'
  export default {
    data() {
      return {}
    },
    mounted() {
      this.initCharts();
    },
    methods: {
      initCharts() {
        let rosePlot = new Rose(this.$refs['root'], {
          data: [{
              type: '证件处理',
              value: 27
            },
            {
              type: '公信处理',
              value: 25
            },
            {
              type: '垃圾分类',
              value: 18
            },
            {
              type: '便民利民',
              value: 15
            },
            {
              type: '公正事件',
              value: 10
            },
            {
              type: '其他',
              value: 5
            },
          ],
          xField: 'type',
          yField: 'value',
          seriesField: 'type',
          radius: 0.9,
          label: {
            offset: -15,
          },
          tooltip: {
          fields: ["ratio", "value"],
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(47, 6, 170, 0.8)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontSize: "16px",
              lineHeight: "2em",
              fontFamily: "TencentSans",
            },
          },
        },
        });
        rosePlot.render();
      }
    }
  }
</script>
<style lang="scss">

</style>